import React, { useEffect } from 'react';
import { StyleProp, StyleSheet, TextInput, TextStyle, ViewStyle } from 'react-native';
import { Text, View } from 'native-base';
import { Touchable } from 'react-native-toast-message/lib/src/components/Touchable';

interface IFieldProps {
  placeholder: string;
  label: string;
  fieldStyls?: StyleProp<ViewStyle>;
  inputNumber?: boolean;
  onChangeText?: (text: string) => void;
  editable?: boolean;
  value: string;
  name?: string;
  labelStyles?: StyleProp<TextStyle>;
  onPress?: (name: string) => void;
  validate?: (value: string) => void; // 验证函数
}

const Field: React.FC<IFieldProps> = (props) => {
  return (
    <React.Fragment>
      <View style={[styles.field, props.fieldStyls]}>
        <View style={styles.label}>
          <Text fontWeight={'bold'} style={props.labelStyles}>
            {props.label}
          </Text>
        </View>
        {!props.inputNumber && (
          <Touchable
            style={{ width: '70%' }}
            onPress={() => {
              props.onPress ? props.onPress(props.name || '') : undefined;
            }}
          >
            <TextInput
              editable={props.editable === undefined ? true : props.editable}
              placeholder={props.placeholder}
              style={styles.input}
              value={props.value}
              onChangeText={(text) => {
                props.onChangeText ? props.onChangeText(text) : null;
                props.validate ? props.validate(props.value) : null;
              }}
              onBlur={() => (props.validate ? props.validate(props.value) : null)}
            />
          </Touchable>
        )}
        {props.inputNumber && (
          <TextInput
            editable={props.editable === undefined ? true : props.editable}
            inputMode={'numeric'}
            value={props.value}
            keyboardType={'numeric'}
            placeholder={props.placeholder}
            style={styles.input}
            onChangeText={(text) => {
              props.onChangeText ? props.onChangeText(text) : null;
              props.validate ? props.validate(props.value) : null;
            }}
            onBlur={() => (props.validate ? props.validate(props.value) : null)}
          />
        )}
      </View>
    </React.Fragment>
  );
};

const styles = StyleSheet.create({
  field: { width: '100%', paddingVertical: 8, flexDirection: 'row', alignItems: 'center' },
  label: { width: '25%' },
  input: { width: '100%', borderBottomWidth: 1, borderColor: '#ebedf0', color: '#333333' },
});

export default Field;
